<template>
	<view>
		<scroll-view scroll-y="true" class="contsss" :show-scrollbar="true" style="height:100vh">
			<view class="" style="height: 25upx;" v-if="array.length>0">

			</view>
			<view v-for="(item,index) in array" :key="index" @click="readArticle(item)">
				<view class="qrcodes" v-if="item.departDate">
					<view class="BuyTicket_1x">
						{{item.startPoint||''}} <text class="iconfont icondanxiangzhuanhuan"
							style="color: #999;margin: 0 10upx;"></text>
						{{item.endPoint||''}}
						<text style="margin-left: auto;font-size: 42upx;color: #4374eb;"
							class="iconfont iconqrcode"></text>
					</view>
					<view class="qrcodes_2">
						<view class="titlse_6">
							<view class="MyOrder_1x">
								<view class="MyOrder_1x_1">
									{{item.departDate||''}} {{item.departTime?item.departTime:''}} <text style="font-size: 28upx;margin-left: 10upx;">发车</text>
								</view>
								<view class="MyOrder_1x_2">
									{{item.vehicle||''}}
								</view>
							</view>
							<view class="MyOrder_1y">
								<view class="MyOrder_1y_2">
									<view class="MyOrder_1y_2x">
										<text class="MyOrder_1y_2x-1x"></text>
										<text class="MyOrder_1y_2x-1ys">{{item.address||''}} </text>

									</view>
									<view class="MyOrder_1y_2x">
										<text class="MyOrder_1y_2y-1y"></text>
										<text class="MyOrder_1y_2x-1ys">{{item.priceAddress||''}} </text>
									</view>
								</view>
								<view style="font-size: 24upx;margin-left: auto;color: #999;">班次：{{item.code||''}}
								</view>
							</view>
						</view>
					</view>
					<view class="qrcodes_1">
						<view class="qrcodes_1l">

						</view>
						<view class="qrcodes_1r">

						</view>
						<view class="qrcodes_1x">
							票数:<text
								style="color: #4374eb;font-size: 36upx;font-weight: 500;margin: 0 10upx;">{{item.seatSum||''}}</text>
							张
						</view>
						<view class="qrcodes_1y">

						</view>
						<view class="qrcodes_1z">
							¥ {{item.priceSum?item.priceSum.toFixed(2):''}}
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="array.length>5"
				style="padding-bottom: 18upx; font-size: 26upx;text-align: center;color: #666;">
				已经到底啦～
			</view>
			<view class="NoData" v-if="array.length==0">
				<view class="NoDataA">
					<image class="NoData_images" src="@/static/imge/zanwu.svg"></image>
				</view>
				<view class="NoData_texte1" v-if="!showYSs">
					亲，今日暂无行程
				</view>
				<view class="NoData_texte2" v-if="!showYSs">我的-行程可查看更多行程哦～</view>
				<view class="NoData_texte1" v-if="showYSs" @click="tiaozhuan()">
					亲，当前暂未登录
				</view>
				<view class="NoData_texte2" v-if="showYSs" @click="tiaozhuan()">可以先去登录哦～</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				array: [],
				showYSs: false
			}
		},
		onLoad() {
			
		},
		onShow() {
			if (uni.getStorageSync('userJson')) {
				this.showYSs = false
				this.findList()
			} else {
				this.showYSs = true
			}
		},
		methods: {
			...mapMutations(['getData', "formData", 'currentDateStr']),
			async findList() {
				await this.currentDateStr()
				var that = this
				that.array = []
				var objP = {
					pageNum: '1',
					pageSize: '100',
					status: '1',
					departDate: this.$store.state.currentDate,
					userId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : ''
				}
				const obj = {
					url: 'ddOrderInfo/findList',
					data: objP,
					success(res) {
						that.array = res.datas.list
					},
					fail(res) {

					},
					complete(res) {}
				}
				that.getData(obj)

			},
			tiaozhuan(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			readArticle(e) {
				uni.navigateTo({
					url: '/pagesA/dingdanxq/dingdanxq?id=' + encodeURIComponent(JSON.stringify(e)) 
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.contsss {
		background: #f5f5f5;
	}

	.qrcodes {
		background-color: #fff;
		border-radius: 16upx;
		margin: 0 25upx;
		margin-bottom: 25upx;
	}

	.BuyTicket_1x {
		font-size: 32upx;
		font-weight: 500;
		height: 100upx;
		display: flex;
		align-items: center;
		padding: 0 25upx;
	}

	.qrcodes_2 {
		padding: 25upx;
		padding-top: 0;

		.titlse_6 {
			background-color: #f7f7f7;
			padding: 25upx;
			border-radius: 16upx;

			.MyOrder_1x {
				font-size: 30upx;
				font-weight: 500;
				display: flex;
				align-items: center;

				.MyOrder_1x_1 {
					display: flex;
					align-items: center;
				}

				.MyOrder_1x_2 {
					margin-left: auto;
				}
			}

			.MyOrder_1y {
				display: flex;
				align-items: center;
				margin-top: 5upx;

				.MyOrder_1y_2 {
					.MyOrder_1y_2x {
						font-size: 28upx;
						display: flex;
						align-items: center;
						margin-top: 10upx;

						.MyOrder_1y_2x-1x {
							width: 16upx;
							height: 16upx;
							background: #61d34e;
							border-radius: 50%;
							border: 6upx solid #dff6dc;
							margin-right: 10upx;
						}

						.MyOrder_1y_2y-1y {
							width: 16upx;
							height: 16upx;
							background: #f3b158;
							border-radius: 50%;
							border: 6upx solid #fcefdd;
							margin-right: 10upx;
						}

						.MyOrder_1y_2x-1ys {}
					}
				}
			}
		}
	}

	.qrcodes_1 {
		height: 100upx;
		border-top: 2upx dashed #ccc;
		position: relative;
		font-size: 30upx;
		display: flex;
		align-items: center;
		padding: 0 30upx;

		.qrcodes_1l {
			width: 40upx;
			height: 40upx;
			border-radius: 50%;
			background-color: #f7f7f7;
			position: absolute;
			top: -20upx;
			left: -20upx;
		}

		.qrcodes_1r {
			width: 40upx;
			height: 40upx;
			border-radius: 50%;
			background-color: #f7f7f7;
			position: absolute;
			top: -20upx;
			right: -20upx;
		}

		.qrcodes_1z {
			margin-left: auto;
			font-size: 32upx;
		}

		.qrcodes_1x {
			font-weight: 500;
		}
	}
</style>